<!-- 注册组件 -->
<template>
    <el-container class="register register-login register-login-bg">
        <div class="register-phone-box">
            <div class="register-text"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/register-text.png" alt=""></div>
            <el-row class="register-phone-con">
                <el-col :span="12"><div class="phone-title-left">欢迎注册</div></el-col>
                <el-col :span="12"><div class="phone-title-right"><el-button type="text" class="register-btn-text">已有账户?</el-button><el-button type="text" @click="$router.push('/login')" class="login-font-color">请登录</el-button></div></el-col>
                <el-col :span="24">
                    <div class="register-form-int">
                        <el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-ruleForm">
                            <el-form-item label="手机号：" prop="phone_number">
                                <el-input class="register-int" maxlength="11" v-model="form.phone_number" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码：">
                                <el-input class="register-int image_code" v-model="form.pic_code"></el-input>
                                <ImageCode v-model="form.pic_code_key"></ImageCode>
                            </el-form-item>
                            <el-form-item label="短信验证码：" prop="phone_verify_code" class="phone-code-form">
                                <el-input class="register-int" maxlength="6" v-model="form.phone_verify_code" placeholder="请输入短信验证码"></el-input><MessageCode @click.native="getMessageCode" ref="messageCode" :phoneNumber="form.phone_number"></MessageCode>
                            </el-form-item>
                            <el-form-item label="设置密码：" prop="password">
                                <el-input class="register-int" type="password" maxlength="12" v-model="form.password" placeholder="请输入6-12位密码，建议包含数字和字母"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码：" prop="password2">
                                <el-input class="register-int" type="password" maxlength="12" v-model="form.password2" placeholder="请再次确认密码"></el-input>
                            </el-form-item>
                            <el-form-item label="邀请码：" prop="invite_code" class="item-code">
                                <el-input class="register-int" v-model="form.invite_code" placeholder="请输入邀请码，若没有，可不填"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="change-default">
                        <el-checkbox v-model="form.agreeProtocol">我已阅读并同意<a href="/guide/agreement/" target="_blank"><el-button type="text" class="register-btn-link">《汇票线用户注册协议》</el-button></a></el-checkbox>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="register-btn">
                        <el-button type="primary" @click="register">立即注册</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-container>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import MessageCode from '@component/common/MessageCode.vue';
    import ImageCode from '@component/common/ImageCode.vue'
    import { Mutation } from 'vuex-class';
    @Component({
        components: {
            MessageCode,
            ImageCode
        }
    })
    export default class Register extends Vue {
        @Mutation setUser;
        form = {
            phone_number: '',
            password: '',
            password2: '',
            phone_verify_code: '',
            agreeProtocol: true,
            pic_code: '',
            pic_code_key: '',
        }
        rules = {
            phone_number: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '手机号码错误',
                    trigger: 'blur'
                },
                { validator: this.phoneChange, trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入登录密码', trigger: 'blur' },
                {
                    pattern: /^[a-zA-Z0-9]{6,12}$/,
                    message: '请输入6-12位密码',
                    trigger: 'blur'
                }
            ],
            password2: [
                { required: true, message: '请再次输入登录密码', trigger: 'blur' },
                { validator: this.testConfirmPassword, trigger: 'blur' }
            ],
            phone_verify_code: [
                { required: true, message: '请输入短信验证码', trigger: 'blur' }
            ],
            pic_code: [
                { required: true, message: '请输入图形验证码', trigger: 'blur' }
            ]
        }
        // 判断两次输入密码是否一致
        testConfirmPassword (rule: string, value: string, cb: any) {
            if (this.form.password === '') {
                cb(new Error('请先输入密码'));
            } else {
                if (value === this.form.password) {
                    cb();
                } else {
                    cb(new Error('您两次输入的密码不一致,请重新输入'));
                }
            }
        }
        // 判断手机号是否已经注册
        phoneChange (rule: string, value: string, callback: any) {
            this.$http.get(`customers/testPhoneNumber?phone=${this.form.phone_number}`)
                .then((response) => {
                    if(!response.data) {
                        callback(new Error('手机号已注册，请直接登录'));
                    }else{
                        callback();
                    }
                })
        }
        // 获取手机验证码
        getMessageCode () {
            this.$refs.form.validateField('phone_number',phoneValid => {
                if(!phoneValid){
                    this.$refs.messageCode.start();
                }
            })
        }
        // 注册
        async register () {
            this.$refs.form.validate(valid => {
                if(!this.form.agreeProtocol){
                    this.$alert('请先阅读并同意“汇票线用户注册协议”','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box',
                        center: true,
                        callback: action => {}
                    })
                    return;
                }
                let signForm = this.form;
                if(valid) {
                    this.postRegister(signForm);
                }
            })
        }
        async postRegister (form: any) {
            let res = await this.$http.post('customers/customerReg',form)
            if (res.status == 201){
                let loginForm = {
                    username: this.form.phone_number,
                    password: this.form.password,
                    enterprise_id: '-1'
                }
                this.postLogin(loginForm);
            }
        }
        async postLogin (form: any) {
            let res = await this.$http.post('customers/customerLogin',form)
            if(res.status == 201){
                let {
                    token,
                    customer_id,
                    enterprise_name,
                    customer_name,
                    enterprise_id,
                    corpNo
                } = res.data;
                let userInfo = {
                    customer_id,
                    enterprise_id,
                    enterprise_name,
                    customer_name,
                    corpNo
                }
                localStorage.setItem('Authorization', token);
                this.setUser(userInfo);
                let backUrl = /back=.+$/.exec(location.hash);
                if(backUrl && backUrl.length == 1){
                    location.href = backUrl[0].split('=')[1]
                    return false
                }
                this.$router.push('/approveCustomer');
                this.$alert('注册成功，继续完善联系人信息','提示',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box',
                    callback: action => {

                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .register-phone-box {
        width: 500px;
        background-image: url("https://hpx-pc.oss-cn-beijing.aliyuncs.com/registerImgTem/register-bg-box.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin-top: 191px;
        margin-bottom: 90px;
    }
    .register-phone-con {
        padding: 28px 32px 20px 28px;
    }
    .register-text {
        position: absolute;
        top: -127px;
        left: 100px;
        img {
            width: 309px;
            height: 109px;
        }
    }
    .register-btn{
        .el-button{
            padding: 0;
        }
    }
</style>
<style lang="scss">
    .register-phone-box {
        .phone-code-form {
            .el-input {
                width: 214px;
                margin-right: 4px;
            }
            .register-int .el-input__inner {
                width: 214px;
            }
        }
    }
    .image_code {
        width: 150px;
        .el-input__inner {
            width: 150px;
        }
    }
    .demo-ruleForm{
        .valid-image-code{
            line-height: 32px;
            .el-button{
                padding: 0;
            }
        }
    }
</style>